<!-- 尾部带按钮的输入框(搜索框) -->
<!-- 
    <myPassword
        placeholder='呼呼' //输入框的placeholder占位符
        @search='console'> //点击搜索按钮或者回车键 时触发的事件 (searchText)=> searchText = '输入框的内容'
    </myPassword>
 -->
<template>
    <div style="display: inline-block;">
        <el-dialog vdialogDrag v-drag.0=' ".el-dialog__header" ' :title=" title||'修改密码' " :visible.sync="iShow" width="40%" avisible @closed='iShow=null,reset()'>
            <el-form v-if='iShow!==null' :model="pass" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="原密码：" prop="old">
                    <el-input v-model="pass.old" placeholder="请输入原密码" clearable></el-input>
                </el-form-item>
                <el-form-item label="新密码：" prop="new">
                    <el-input v-model="pass.new" placeholder="请输入新密码" clearable show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码：" prop="new2">
                    <el-input v-model="pass.new2" placeholder="请确认密码" clearable show-password></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button type="primary" @click="doSubmit" aref='z0' z:on-clickmove='console.error(event,$event$)'>确 定</el-button>
                <el-button plain @click="close">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    var dad, $refs, checkValid;
    export default {
        ref: false,
        global: false,
        name: 'myPassword',
        props: [ 'title', 'dad','son','dadSon' ],
        data: function () {
            return {
                iShow: false,
                pass: { 
                    old: "" ,
                    new: "",
                    new2: "",
                }, //编辑表单
                rules: {
                  //表单验证
                    old: [
                        { required: true, message: "请输入旧密码", trigger: "blur" },
                        { min: 3, max: 12, message: "密码只能输入字母或数字,且必须是3-12位", trigger: "blur" }
                    ],
                    new: [
                        { required: true, message: "请输入新密码", trigger: "blur" },
                        { min: 3, max: 12, message: "密码只能输入字母或数字,且必须是3-12位", trigger: "blur" }
                    ],
                    new2: [
                        { required: true, message: "请输入确认密码", trigger: "blur" },
                        { min: 3, max: 12, message: "密码只能输入字母或数字,且必须是3-12位", trigger: "blur" }
                    ],
                },
            }
        },
        methods: {
            doSubmit:async function() {
                const pass = this.pass;
                if ( pass.old === "" ) {
                    return $.msgError("原密码不能为空！");
                } else if(pass.old !== G.local('MyPictureID') ) {
                    return alert("您输入原密码不正确，请重新输入！");
                }else if ( pass.new === "" ) {
                    return $.msgError("新密码不能为空！");
                } else if ( !(/^[A-Za-z0-9]{3,12}$/.test(pass.new)) ) {
                    return $.msgError("新密码格式不正确,只能输入3-12位的字母或数字！");
                } else if ( pass.new2 === "" ) {
                    return $.msgError("确认密码不能为空！");
                } else if ( !(/^[A-Za-z0-9]{3,12}$/.test(pass.new2)) ) {
                    return $.msgError("确认密码格式不正确,只能输入3-12位的字母或数字！");
                }else if ( pass.new2 !== pass.new ) {
                    return $.msgError("两次新密码不匹配！");
                };
                // this.check() && this.$emit('submit',pass,this);
                this.$confirm.waitSuccess("确定要修改您的密码吗？","修改密码",{
                    callback(a){ 
                        a === "confirm" && $success();
                    }
                })
                .success(
                    async ()=> {
                        var res = await $.post('updateUserPassWord',{
                            userId: localStorage.getItem("userId"),
                            userPassword: this.pass.new2,
                        });
                        if(!res.success) return $.msgError(res.msg||'error!');
                        this.iShow = false;
                        $.update();
                        // G.clearLocal(["roleId","roleName","loginName","userId","selectedMenu","menus"]),
                        // this.$root.exit();
                    }
                );
            },
            open() {
                this.iShow = true;
            },
            close() { 
                this.iShow = false;
            },
            check() {
                return checkValid($refs.ruleForm);
            },
            clear() {
                $refs.ruleForm.clearValidate();
            },
            reset() {
                // this.iShow = false;
                $refs.ruleForm.resetFields();
            }
        },
        created() {
            dad = this.parseDadSon('myPassword');
            this.$bindVue();
        },
        mounted() {
            $refs = this.$refs;
            checkValid = G.checkValid;
        }

    }
</script>

<style>
    
</style>